<template>
	<view class="hotel-search-content">
		
		<view class="hotel-header">
			<view class="hotel-search-navbar">
				<view class="left">
					<image src="../../static/images/back.png" @click="gotoBack"></image>
					
				</view>
				
				<view class="middle">
					<view class="icon">
						<image src="../../static/images/medal03.png" mode=""></image>
					</view>
					|
					<input class="input"  :value="searchKey"  v-model="searchKey" confirm-type="search" @confirm="getSearchResult" type="text">
					<view class="search-text" @click="getSearchResult">
						搜索
					</view>
				</view>
				
				<view class="right">
					更多
				</view>
				
			</view>
			
		</view>
		
		<view class="hotel-body">
			<view class="hotel-body-content">
				<view class="hotel-item">
				
					<image src="" mode=""></image>
					<view class="hotel-info">
						<view class="hotel-name">asdasd</view>
						<view class="hotel-comment">asdsa</view>
						<view class="hotel-location">asdas</view>
						<view class="hotel-symbol">
							<view class="symbol-item"></view>
						</view>
						<view class="hotel-price">
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--          监听日期改变的事件，  设置无界面            控制日期显示 -->
		<date-picker @change="changeDate" :modal="true" :show="showCaledar"></date-picker>
	</view>
</template>

<script>
	import datePicker from '../../components/date-picker/date-picker.vue'
	export default {
		components: {
			datePicker
		},
		// 获取路由跳转过来传递的参数
		onLoad(options) {
			console.log(options)
			this.choiceDate = options.choiceDate
			this.dayCount = options.dayCount
			this.position = options.position
			this.searchKey = options.searchKey
			
			// 通过传入的条件进行搜索
			this.getSearchResult()
		},
		data() {
			return {
				choiceDate: [],
				dayCount: 0,
				position: '',
				searchKey: '',
				showCaledar: false,
			}
		},
		methods: {
			gotoBack() {
				uni.navigateBack({
					delta:1
				})
			},
			// 搜索满足要求的结果
			getSearchResult() {
				console.log('搜索' + this.searchKey + '结果为空')
				// alert('搜索' + this.searchKey + '结果为空')
			},
			// 控制选择器的弹出和显示
			choseTime() {
				this.showCaledar = !this.showCaledar
			},
			// 捕获子组件传递过来的参数
			changeDate({choiceDate, dayCount}) {
				// console.log(choiceDate + " " + dayCount)
				this.choiceDate = choiceDate
				this.dayCount = dayCount
				// this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '  共 ' + dayCount + ' 晚 ';
				// console.log(this.dateStr)
			},
		}
	}
</script>

<style lang="scss">
	.hotel-search-content {
		width: 750rpx;
		height: 100%;
		.hotel-header {
			width: 100%;
			.hotel-search-navbar {
				width: 100%;
				height: 100rpx;
				background-color: #2E8B57;
				// background-color: #007AFF;
				border-bottom: 2px solid #E3E3E3;
				
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: fixed;
				top: 0;
				
				.left {
					// width: 20%;
					// height: 80rpx;
					// background-color: #0C978D;
					margin-left: 20rpx;
					height: 100%;
					display: flex;
					align-items: center;
					image {
						width: 45rpx;
						height: 45rpx;
					}
				}
				.middle {
					width: 60%;
					height: 55%;
					
					background-color: #FFFFFF;
					
					border-radius: 35rpx;
					display: flex;
					align-items: center;
					box-shadow: 0 0 10rpx 5rpx rgba(242, 99, 4, .9);
					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-left: 15rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.input {
						// background-color: #EEEEEE;sad
						margin-left: 10rpx;
						width: 65%;
						border: none;
						background: none;
					}
					.search-text {
						// padding: 4rpx;
						// height: 100%;
						// background-color: #2291F8;
						// line-height: 100%;
						margin: 0 auto;
					}
					
				}
				.right {
					// width: 20%;
					// margin: 0 auto;
				}
				
			}
			
		}
		.hotel-body {
			
			margin: 0 15rpx;
			margin-top: 150rpx;
			// background-color: #007AFF;
			
			.hotel-body-content {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				
				.hotel-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					
					.hotel-img {
						width: 100%;
						height: 100%;
						
					}
				}
			}
		}
	}
	
</style>
